<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<title>Document</title>
	<style>
	*{padding: 0;margin: 0}
	body{margin: 20px}
	.box{position: relative;height: 34px;}
	.box input{width: 300px;height: 34px;border:1px solid #dfe3e9;}
	/* 支付密码  格式化为一个数字占一个格 */
	.validateInput{font-size: 0;position: relative;clear: both;border-radius: 3px;text-align: left;}
	.validateInput span{display: inline-block;border:1px solid #dfe3e9;margin-right: -1px;cursor: pointer;position: relative;z-index: 5}
	.validateInput span.active:before{content:"";position: absolute;left:50%;top:50%;width:6px;height:6px;background-color: #333;border-radius: 50%;margin: -3px 0 0 -3px}
	.validateInput input{position: absolute;left: 0;top:0;padding:0!important;text-align: center;margin-right: -1px;line-height: 34px;width: 34px;height: 34px;
		-webkit-transition:left .1s linear;
	    -moz-transition: left .1s linear;
	    transition: left .1s linear;opacity: 0;
	}
	.validateInput input.focus{z-index: 10;border-radius: 1px solid #4d8ae5;box-shadow:0 0 6px 2px #4d8ae5;opacity: 1}
	/* 禁用搜狗的软键盘 */
	input::-webkit-input-safebox-button{display: none;}
    h1{text-align: center;font-size: 30px;line-height: 50px}
	</style>
</head>
<body>
	<h1>支付宝密码输入</h1>
	<p style="text-align:center">仅能输入数字</p>
	<div class="box">
		<input type="text" class='password'>
	</div>
	<button>重置</button>
	<script src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="index.js" type="text/javascript"></script>
	<script>
		var aa=$('.password').validateInput()
		$('button').on('click',function(){
			aa.empty(true)
		})
	</script>
</body>
</html>